<!--  -->
<template>
  <div class="">
    <!-- 新增公海弹框 -->
    <el-dialog
      title="新增公海"
      :visible.sync="isShowaddSeas"
      @close="closeDia"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="25%"
    >
      <el-form
        ref="roleForm"
        size="small"
        :model="seasFromAdd"
        :rules="addSeasRule"
        label-width="80px"
      >
        <el-form-item label="公海名称" prop="seasName">
          <el-input v-model="seasFromAdd.seasName"></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center">
        <el-button type="primary" plain @click="submitSeas" class="queryButton"
          >保存</el-button
        >
        <el-button plain class="resetButton" @click="resetQuery('roleForm')"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 批量转移客户弹框 -->
    <el-dialog
      title="批量转移客户"
      :visible.sync="isShowChangeSeasList"
      @close="closeChangeSeas('changeFrom')"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="25%"
    >
      <el-form
        ref="changeFrom"
        size="small"
        :model="changeSeasFrom"
        :rules="changeRule"
        label-width="80px"
      >
        <el-form-item label="公海名称" prop="seasList_name">
          <el-select
            v-model="changeSeasFrom.seasList_name"
            placeholder="请选择公海"
          >
            <el-option
              v-for="(item, index) in seasList_Arr"
              :key="index"
              :label="item.seasName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center">
        <el-button
          type="primary"
          plain
          @click="submitChangeSeas"
          class="queryButton"
          >保存</el-button
        >
        <el-button
          plain
          class="resetButton"
          @click="closeChangeSeas('changeFrom')"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 详情公海弹框 -->
    <el-dialog
      title="公海详情"
      :visible.sync="isShowSeasDetail"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="true"
      width="40%"
    >
      <el-form
        ref="basicForm"
        :inline="false"
        size="small"
        :model="seasDetail"
        :rules="detailSeasRule"
        class="demo-form-inline"
        label-position="left"
        label-width="220px"
      >
        <el-form-item label="公海名" prop="seasName">
          <el-input v-model="seasDetail.seasName"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-tree
            :data="seasDepartmentList"
            ref="detailUserTree"
            show-checkbox
            node-key="id"
            size="small"
            :default-expanded-keys="defaultExpandedKeys"
            :default-checked-keys="defaultCheckedKeys"
            highlight-current
            @check="checkedFun"
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="用户列表" prop="userListArrSelect">
          <el-select
            v-model="seasDetail.userListArrSelect"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in userListArr"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-checkbox v-for="item in userListArr" :key="item.id" v-model="item.checked" :label="item.id" class="user-item">{{ item.nickName }}</el-checkbox> -->
        </el-form-item>
        <el-form-item label="加密字段" prop="enAttributeID">
          <el-select
            v-model="seasDetail.enAttributeID"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in fieldArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-checkbox v-for="item in fieldArr" :key="item.id" v-model="item.checked" :label="item.id" class="user-item">{{ item.name }}</el-checkbox> -->
        </el-form-item>
        <el-form-item label="跟进记录" prop="followUpRecordType">
          <el-select
            v-model="seasDetail.followUpRecordType"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(item, index) in recordTypeArr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="多久未上门" prop="noCome">
          <el-input v-model="seasDetail.noCome"></el-input>
        </el-form-item>
        <el-form-item label="多久未跟进" prop="noFollowUpTime">
          <el-input v-model="seasDetail.noFollowUpTime"></el-input>
        </el-form-item>
        <el-form-item label="多久未成交" prop="noSuccess">
          <el-input v-model="seasDetail.noSuccess"></el-input>
        </el-form-item>
      </el-form>
      <el-form class="buttons">
        <el-button
          type="primary"
          class="submitButton"
          @click="addConfigUserRole"
          >保存</el-button
        >
        <el-button class="resetButton" @click="closeDiaDetial">关闭</el-button>
      </el-form>
    </el-dialog>
    <!-- 新增公海客户弹框 -->
    <el-dialog
      title="新增公海客户"
      :visible.sync="isShowaddMyCus"
      @close="closeShowAdd('roleForm')"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="25%"
    >
      <el-form
        ref="roleForm"
        size="small"
        :model="myCusFromAdd"
        :rules="addMyCusRule"
        label-width="80px"
      >
        <el-form-item label="客户名称" prop="cusName">
          <el-input v-model="myCusFromAdd.cusName"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号" prop="phone">
          <el-input v-model="myCusFromAdd.phone"></el-input>
        </el-form-item>
        <el-form-item label="借款额度" prop="quota">
          <el-input v-model="myCusFromAdd.quota"></el-input>
        </el-form-item>
        <el-form-item label="客户星级" prop="level">
          <el-select v-model="myCusFromAdd.level" placeholder="请选择星级">
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
            <el-option label="4" value="4"></el-option>
            <el-option label="5" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户状态" prop="status">
          <el-select v-model="myCusFromAdd.status" placeholder="请选择">
            <el-option
              v-for="(item, index) in flagStatusArr"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="myCusFromAdd.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div style="width: 100%; text-align: center">
        <el-button type="primary" plain @click="submitMycus" class="queryButton"
          >保存</el-button
        >
        <el-button plain class="resetButton" @click="closeShowAdd('roleForm')"
          >关闭</el-button
        >
      </div>
    </el-dialog>

    <!-- 详情公海客户弹框 -->
    <el-drawer
      title="客户详情"
      :visible.sync="showFlagDetailDia"
      :direction="direction"
      size="85%"
      @click="closeDia"
    >
      <el-form
        ref="basicForm"
        :inline="false"
        size="small"
        class="demo-form-inline"
        :model="flagDetailObj"
        :rules="flagRule"
        label-position="left"
        label-width="220px"
      >
        <div class="filter-container">
          <div class="innerBigBox">
            <div class="innerSty">
              <div class="outBox">
                <div class="templeateBox">
                  <div class="innerPhone">
                    <span style="font-weight: 600">姓名：</span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="flagDetailObj.name"
                      placement="top-start"
                    >
                      <span>{{ flagDetailObj.name }}</span>
                    </el-tooltip>
                  </div>
                  <div class="innerPhone">
                    <span style="font-weight: 600">电话：</span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="flagDetailObj.phone"
                      placement="top-start"
                    >
                      <span>{{ flagDetailObj.phone }}</span>
                    </el-tooltip>
                    <!-- <i class="el-icon-phone-outline" @click="callUserPhone(flagDetailObj.id)"></i> -->
                  </div>
                  <div class="innerPhone_selet">
                    <span style="font-weight: 600">状态：</span>
                    <el-select
                      v-model="flagDetailObj.status"
                      placeholder="请选择客户状态"
                    >
                      <el-option
                        v-for="(item, index) in flagStatusArr"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="templeateBox">
                  <div class="innerName">
                    <span style="font-weight: 600">跟进时间：</span
                    >{{
                      flagDetailObj.newTime === null
                        ? "-"
                        : timestampToDate(flagDetailObj.newTime)
                    }}
                  </div>
                </div>
              </div>
              <div class="innerBottonGroups">
                <div @click="goLastPage">上一条</div>
                <div @click="goNextPage">下一条</div>
              </div>
            </div>
            <div class="userRemark">
              <div class="remarkTitle">
                <div style="font-weight: 600">客户备注</div>
                <div @click="commitUserfo">保存</div>
              </div>
              <el-input
                type="textarea"
                v-model="flagDetailObj.remarks"
                clearable
                placeholder="车 + 房 + 五险一金"
              ></el-input>
            </div>
            <div class="userRemark">
              <div class="remarkTitle">
                <div style="font-weight: 600">跟进记录</div>
                <div @click="commitUserfo">保存</div>
              </div>
              <el-input
                type="textarea"
                @input="forceUpdate"
                v-model="flagDetailObj.followUpRecord"
                clearable
              ></el-input>
              <div class="beforeWords">
                <div
                  v-for="item in beforeWords"
                  :key="item.id"
                  @click="changeFollow(item.name)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="followRecode">
            <div class="titleFo">历史跟进记录</div>
            <div class="outSideBox">
              <div
                class="contentFo"
                v-for="item in recordsRop"
                :key="item.id"
                v-show="recordsRop.length > 0"
              >
                <div class="timeBox">
                  {{ timestampToDate(item.createTime) }}
                </div>
                <div class="messageBox">
                  {{ item.userNickName }} : {{ item.records }}
                </div>
              </div>
            </div>
            <div class="contentFo" v-show="recordsRop.length == 0">
              <el-empty description="暂无"></el-empty>
            </div>
          </div>
          <!-- <div class="bottomBtns">
            <div style="font-size: 30px;" @click="changeFlag(flagDetailObj.id)">
              <i class="el-icon-star-off"></i>
            </div>
            <div @click="recycleCus('one',flagDetailObj)">
              移入公海
            </div>
          </div> -->
        </div>
      </el-form>
    </el-drawer>

    <!-- 导入记录 -->
    <el-dialog
      title="导入记录"
      :visible.sync="isShowuploadRecodes"
      @close="isShowuploadRecodes = false"
      :close-on-press-escape="true"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-table :data="uploadData" style="width: 100%">
        <el-table-column prop="importUserName" label="导入用户" width="90">
        </el-table-column>
        <el-table-column prop="repeatNum" label="重复条数" width="90">
        </el-table-column>
        <el-table-column prop="importNum" label="总条数" width="90">
        </el-table-column>
        <el-table-column prop="importTime" label="导入时间">
          <template slot-scope="scope">
            <span>{{
              scope.row.importTime === null
                ? "-"
                : timestampToDate(scope.row.importTime)
            }}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        class="pagination_container"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        :page.sync="pagination.page"
        :limit.sync="pagination.pageSize"
        @pagination="getImportList"
      />
      <div style="width: 100%; text-align: center">
        <el-button
          plain
          class="resetButton"
          @click="isShowuploadRecodes = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 盒子 -->
    <div class="seasBox">
      <div class="leftSeasBox">
        <el-form>
          <el-button
            type="primary"
            plain
            class="queryButton"
            @click="addRoleBtn"
            v-permissions="'seas:add'"
            icon="el-icon-plus"
            >新增公海</el-button
          >
        </el-form>
        <!-- 公海列表 -->
        <div
          :class="[item.checked ? 'checkSeasItemBox' : 'seasItemBox']"
          v-for="(item, index) in seasList_Arr"
          :key="index"
          v-show="seasList_Arr.length > 0"
        >
          <div @click="changeSeasId(item.id, index)">
            <span style="font-weight: 600">名称：</span>{{ item.seasName }}
          </div>
          <div @click="setSeas(item)" v-permissions="'seas:update'">
            <i class="el-icon-s-tools"></i>
          </div>
          <div @click="deleteSeas(item)" v-permissions="'seas:delete'">
            <i class="el-icon-delete-solid"></i>
          </div>
        </div>

        <div class="nullArrList" v-show="seasList_Arr.length === 0">
          暂无数据~
        </div>
      </div>
      <div class="rightSeasBox">
        <el-form
          ref="formInSeas_res"
          :inline="true"
          size="small"
          :model="formInSeas"
          class="demo-form-inline"
        >
          <el-form-item label="关键字查询" prop="user">
            <el-input
              v-model="formInSeas.kw"
              placeholder="请输入用户名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="未跟进时间" prop="noFollowDay">
            <el-select
              v-model="formInSeas.noFollowDay"
              placeholder="请选择跟进时间"
            >
              <el-option
                v-for="(item, index) in noFollowDayArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 需要的 -->
          <!-- <el-form-item label="星级" prop="level">
            <el-select v-model="formInSeas.level" placeholder="请选择星级">
              <el-option
                v-for="(item, index) in levelArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="是否重复" prop="isRepeat">
            <el-select
              v-model="formInSeas.isRepeat"
              placeholder="请选择是否重复"
            >
              <el-option
                v-for="(item, index) in isRepeatArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据来源" prop="status">
            <el-select v-model="formInSeas.clientId" placeholder="请选择状态">
              <el-option
                v-for="(item, index) in mesFromArr"
                :key="index"
                :label="item.tName"
                :value="item.tId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="formInSeas.value_seas"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getCustomersSeasCus"
              class="queryButton"
              icon="el-icon-search"
              >查询</el-button
            >
            <el-button
              class="resetButton"
              @click="resetQuerySeas('formInSeas_res')"
              icon="el-icon-refresh"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <div style="display: flex; flex-wrap: wrap">
          <el-button
            type="primary"
            @click="addmyCusBtn"
            class="queryButton"
            v-permissions="'customers:add'"
            plain
            style="margin-left: 5px; margin-bottom: 5px;"
            >新增公海客户</el-button>
          <el-upload
            name="file"
            class="upload-demo"
            action="string"
            :http-request="uploadExcel"
            accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.csv"
            :show-file-list="false"
            :auto-upload="true"
            :on-error="fileUploadError"
            :on-success="fileUploadSuccess"
          >
            <el-button
              class="queryButton"
              style="margin-left: 5px; margin-bottom: 5px;"
              icon="el-icon-upload2"
              v-permissions="'customers:uploadExcel'"
              >上传客户列表</el-button
            >
          </el-upload>
          <el-button
            type="success"
            @click="downLoadCus"
            icon="el-icon-download"
            class="queryButton"
            v-permissions="'customers:downloadCus'"
            plain
            style="margin-left: 5px; margin-bottom: 5px;"
            >下载客户</el-button
          >
          <el-button
            type="danger"
            @click="downLoadTem"
            icon="el-icon-download"
            class="queryButton"
            plain
            style="margin-left: 5px; margin-bottom: 5px;"
            >下载excel模板</el-button
          >
          <el-button
            type="primary"
            @click="salvageFun"
            class="queryButton"
            v-permissions="'customers:salvage'"
            plain
            style="margin-left: 5px; margin-bottom: 5px;"
            >捞取</el-button
          >
          <el-button type="primary" class="queryButton" @click="shareFun" plain style="margin-left: 5px; margin-bottom: 5px;"
            >分配</el-button>
          <el-button
            type="warning"
            @click="deleteBtnAll"
            icon="el-icon-delete"
            v-permissions="'customers:batchDelete'"
            class="queryButton"
            plain
            style="margin-left: 5px; margin-bottom: 5px;"
            >批量删除客户</el-button>
          <el-button
            type="primary"
            @click="seeImportUserList"
            icon="el-icon-view"
            class="queryButton"
            plain
            style="margin-left: 5px; margin-bottom: 5px;"
            >查看导入客户记录</el-button>
          <el-button
            type="warning"
            @click="changeSeasFun"
            icon="el-icon-sort"
            class="queryButton"
            v-permissions="'customers:changeSeas,seas:list'"
            plain
            style="margin: 5px 0 0 0"
            >批量转移客户</el-button
          >
        </div>
        <!-- 用户列表弹框 -->
        <el-dialog
          title="用户列表"
          :visible.sync="isShowUserList"
          @close="isShowUserList = false"
          :close-on-press-escape="true"
          :close-on-click-modal="false"
          width="30%"
        >
          <el-form
            ref="formInSeas"
            :inline="true"
            size="small"
            class="demo-form-inline"
          >
            <el-form-item label="用户">
              <el-select
                v-model="checkedUserId"
                filterable
                placeholder="请选择用户"
              >
                <el-option
                  v-for="item in userListArr"
                  :key="item.id"
                  :label="item.nickName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="submitUser"
                class="queryButton"
                >确定</el-button
              >
              <el-button
                plain
                class="resetButton"
                @click="isShowUserList = false"
                >关闭</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 表格 -->
        <el-table
          :data="seasListUser"
          :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
          size="mini"
          @sort-change="changeTableSort"
          style="width: 100%; margin-top: 5px"
          @select="selectOptions"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="name" label="昵称" width="90">
            <template slot-scope="scope">
              <span>
                <span v-show="scope.row.isRepeat" class="repeatBtn">重复</span
                >{{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="120">
          </el-table-column>
          <el-table-column
            prop="quota"
            width="90"
            :show-overflow-tooltip="true"
            label="额度"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.quota === null ? "-" : scope.row.quota
              }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="level" label="星级" width="120">
            <template slot-scope="scope">
              <span>{{
                scope.row.level === null ? "-" : scope.row.level
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column prop="newTime" label="跟进时间" width="120" sortable>
            <template slot-scope="scope">
              <span>{{
                scope.row.newTime === null ? "-" : timestampToDate(scope.row.newTime)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="newTime" label="跟进记录" width="120">
            <template slot-scope="scope">
              <span>{{
                scope.row.newRecord === null ? "-" : scope.row.newRecord
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="clientName" label="数据来源" width="90">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="客户备注"
            width="150">
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                v-permissions="'customer:detail'"
                @click="getFlagDetail(scope.row, scope.$index)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="deletBtn(scope.row)"
                v-permissions="'customers:delete'"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          class="pagination_container"
          :total="paginationForOut.total"
          :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
          :page.sync="paginationForOut.page"
          :limit.sync="paginationForOut.pageSize"
          @pagination="getCustomersSeasCus"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  seasAdd,
  seasDelete,
  seasList,
  seasUpdate,
  customersSeasCus,
  customersShareCus,
  customersSalvage,
  customersAdd,
  customersFollowUpRecord,
  customersUpdateQualificationsByUser,
  customersDownloadCus,
  customersChangeSeas,
} from "@/request/seas";
import { departmentList, userList } from "@/request/departmentUser";
import {
  customersUploadExcel,
  customersImportRecord,
} from "@/request/customerList";
import { timestampToDate } from "@/until/paramRou";
import { thirdClientList } from "@/request/thirdClientList";
import { customersBatchDelete, customersDelete } from "@/request/myCus";
import storages from "@/until/localStorage";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      orderBy: '',
      changeSeasFrom: {
        seasList_name: "",
      },
      changeRule: {
        seasList_name: [
          { required: true, trigger: "change", message: "请输入选择公海" },
        ],
      },
      isShowChangeSeasList: false,
      uploadData: [],
      isShowuploadRecodes: false,
      isRepeatArr: [
        {
          name: "不重复",
          id: 0,
        },
        {
          name: "重复",
          id: 1,
        },
      ],
      noFollowDayArr: [
        {
          name: "3天",
          id: 3,
        },
        {
          name: "7天",
          id: 7,
        },
        {
          name: "30天",
          id: 30,
        },
      ],
      nowIndex: "",
      beforeWords: [
        {
          name: "不需要",
          id: 1,
        },
        {
          name: "空号",
          id: 2,
        },
        {
          name: "关机",
          id: 3,
        },
        {
          name: "正忙",
          id: 4,
        },
        {
          name: "已加微信",
          id: 5,
        },
        {
          name: "拒接",
          id: 6,
        },
      ],
      direction: "rtl",

      // 公海客户详情
      showFlagDetailDia: false,
      flagDetailObj: {
        followUpRecord: "",
      },
      flagRule: {
        followUpRecord: [
          { required: true, trigger: "blur", message: "请输入最新跟进记录" },
        ],
        quota: [{ required: true, trigger: "blur", message: "请输入贷款额度" }],
        name: [{ required: true, trigger: "blur", message: "请输入您的昵称" }],
        seasId: [{ required: true, trigger: "change", message: "请选择公海" }],
        status: [
          { required: true, trigger: "change", message: "请选择客户状态" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "请输入您的手机号" },
          {
            validator(_, value, callback) {
              const regTel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if (!regTel.test(value)) {
                callback(new Error("手机号不符合规则"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      isShowRecords: false,
      recordsRop: [],
      activeName: "",
      // end
      // 新增公海客户弹框
      isShowaddMyCus: false,
      myCusFromAdd: {
        addType: 2,
        cusName: "",
        level: "",
        phone: "",
        quota: "",
        remarks: "",
        seasId: "",
        status: "",
      },
      flagStatusArr: [
        {
          name: "待跟进",
          id: 0,
        },
        {
          name: "己成交",
          id: 1,
        },
        {
          name: "在考虑",
          id: 2,
        },
        {
          name: "己邀约待上门",
          id: 3,
        },
        {
          name: "己沟通不需要",
          id: 4,
        },
        {
          name: "己上门待签约",
          id: 5,
        },
        {
          name: "己上门资质不服",
          id: 6,
        },
        {
          name: "签约",
          id: 7,
        },
        {
          name: "进件",
          id: 8,
        },
        {
          name: "成交",
          id: 9,
        },
      ],
      addMyCusRule: {
        cusName: [
          { required: true, trigger: "blur", message: "请输入您的名字" },
        ],
        quota: [{ required: true, trigger: "blur", message: "请输入借款额度" }],
        seasId: [{ required: true, trigger: "change", message: "请选择公海" }],
        level: [
          { required: true, trigger: "change", message: "请选择客户星级" },
        ],
        status: [
          { required: true, trigger: "change", message: "请选择客户状态" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "请输入您的手机号" },
          {
            validator(_, value, callback) {
              const regTel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if (!regTel.test(value)) {
                callback(new Error("手机号不符合规则"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      // end
      isShowUserList: false,
      checkedUserId: null,
      // 公海数据列表
      formInSeas: {
        level: "",
        kw: "",
        clientId: "",
        seasId: "",
        value_seas: [],
        noFollowDay: "",
        isRepeat: "",
      },
      seasListUser: [],
      //end
      levelArr: [
        {
          id: 1,
        },
        {
          id: 2,
        },
        {
          id: 3,
        },
        {
          id: 4,
        },
        {
          id: 5,
        },
      ],
      seasDepartmentList: [],
      defaultExpandedKeys: [],
      defaultCheckedKeys: [],
      defaultProps: {
        children: "childList",
        label: "depName",
      },
      isDisable: true,
      isShowSeasDetail: false,
      isShowaddSeas: false,
      departmentIDArr: [],
      userListIDArr: [],
      enAttributeArr: [],
      fieldArr: [
        {
          name: "客户名称",
          id: "name",
          checked: false,
        },
        {
          name: "客户电话",
          id: "phone",
          checked: false,
        },
        {
          name: "客户备注",
          id: "remark",
          checked: false,
        },
      ],
      seasDetail: {
        seasId: "",
        seasName: "",
        followUpRecordType: 0,
        noCome: "",
        noFollowUpTime: "",
        noSuccess: "",
        userListArrSelect: [],
        enAttributeID: [],
      },
      detailSeasRule: {
        name: [{ required: true, trigger: "blur", message: "请输入客户名称" }],
        // enAttributeID: [
        //   { required: true, trigger: 'change', message: '请选择加密字段' }
        // ],
        userListArrSelect: [
          { required: true, trigger: "change", message: "请选择您的用户" },
        ],
        phone: [
          { required: true, trigger: "blur", message: "请输入客户手机号" },
          {
            validator(_, value, callback) {
              const regTel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if (!regTel.test(value)) {
                callback(new Error("客户手机号不符合规则"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        remark: [
          { required: true, trigger: "blur", message: "请输入客户备注" },
        ],
        seasName: [
          { required: true, trigger: "blur", message: "请输入您的公海名" },
        ],
        followUpRecordType: [
          { required: true, trigger: "change", message: "请选择您的跟进记录" },
        ],
        noCome: [
          { required: true, trigger: "blur", message: "请输入多久未上门" },
        ],
        noFollowUpTime: [
          { required: true, trigger: "blur", message: "请输入多久未跟进" },
        ],
        noSuccess: [
          { required: true, trigger: "blur", message: "请输入多久未成交" },
        ],
      },
      recordTypeArr: [
        {
          name: "仅自己",
          id: 0,
        },
        {
          name: "全部",
          id: 1,
        },
      ],
      userListArr: [],
      seasList_Arr: [],
      seasFromAdd: {
        seasName: "",
      },
      paginationForOut: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      addSeasRule: {
        seasName: [
          { required: true, trigger: "blur", message: "请输入您的名字" },
        ],
      },
      salvageArr: [],
      mesFromArr: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getSeasListFun();
    this.getDepaermentList(); // 部门列表
    this.getUserList(); // 用户列表
    this.getMesFromList(); // 数据来源
  },
  //方法集合
  methods: {
    // 查看导入客户记录
    seeImportUserList(){
      this.getImportList()
    },
    // 时间顺序切换
    changeTableSort(column){
      var sortingType = column.order;
      this.orderBy = sortingType === 'ascending' ? 'c.new_time asc' : sortingType === 'descending' ? 'c.new_time desc' : '';
      this.getCustomersSeasCus();
    },

    // 保存切换
    submitChangeSeas() {
      this.$refs.changeFrom.validate((valid) => {
        if (valid) {
          let arr = [];
          for (const element of this.salvageArr) {
            arr.push(element.id);
          }
          let changeSeas = {};
          changeSeas.cusIdList = arr;
          changeSeas.seasId = this.changeSeasFrom.seasList_name;

          customersChangeSeas(changeSeas)
            .then((res) => {
              if (res.code === "200") {
                this.isShowChangeSeasList = false;
                this.getCustomersSeasCus();
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
                return;
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        }
      });
    },
    // 关闭弹框
    closeChangeSeas(fromName) {
      this.$refs[fromName].resetFields();
      this.isShowChangeSeasList = false;
    },
    // 批量转移客户
    changeSeasFun() {
      if (this.salvageArr.length === 0) {
        this.$message({
          type: "error",
          message: "请至少选择一位用户",
        });
      } else {
        this.isShowChangeSeasList = true;
      }
    },
    getNowNeedFun(val) {
      customersFollowUpRecord({ cusId: val })
        .then((res) => {
          if (res.code === "200") {
            this.recordsRop = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    getImportList() {
      let obj = {
        page: this.pagination.page,
        limit: this.pagination.pageSize,
      };
      customersImportRecord(obj).then((res) => {
        this.uploadData = res.data.records;
        this.isShowuploadRecodes = true;
        if (res.code === "200") {
          if (
            res.data.total > 0 &&
            Math.ceil(res.data.total / this.pagination.size) <
              this.pagination.page
          ) {
            this.pagination.page = Math.ceil(
              res.data.total / this.pagination.size
            );
            this.getImportList();
          } else {
            this.pagination.total = res.data.total;
          }
        }
      });
    },

    // 我的客户详情
    getFlagDetail(b, c) {
      this.flagDetailObj = b;
      this.nowIndex = c;
      this.viewRecords(b.id);
    },
    // 下一页
    async goNextPage() {
      let changeindex = this.nowIndex + 1;
      let isRight = this.paginationForOut.page - 1;
      let isTo = isRight * this.paginationForOut.pageSize + (changeindex + 1);
      if (isTo <= this.paginationForOut.total) {
        if (changeindex < this.paginationForOut.pageSize) {
          this.getFlagDetail(this.seasListUser[changeindex], changeindex);
        } else {
          this.paginationForOut.page++;
          await this.getCustomersSeasCus();
          this.nowIndex = 0;
          changeindex = 0;
          this.getFlagDetail(this.seasListUser[changeindex], changeindex);
          // console.log("more than", this.seasListUser[changeindex]);
        }
      } else {
        return;
      }
    },
    // 上一页
    async goLastPage() {
      let changeindex = this.nowIndex - 1;
      let isRight = this.paginationForOut.page - 1;
      let isTo = isRight * this.paginationForOut.pageSize + (changeindex + 1);
      if (isTo > 0) {
        if (changeindex >= 0) {
          this.getFlagDetail(this.seasListUser[changeindex], changeindex);
        } else {
          this.paginationForOut.page--;
          await this.getCustomersSeasCus();
          this.nowIndex = this.paginationForOut.pageSize - 1;
          changeindex = this.paginationForOut.pageSize - 1;
          this.getFlagDetail(this.seasListUser[changeindex], changeindex);
        }
      } else {
        return;
      }
    },
    forceUpdate() {
      this.$forceUpdate();
    },
    //
    changeFollow(val) {
      this.flagDetailObj.followUpRecord = val;
      this.$forceUpdate();
    },
    // 跟进记录
    commitUserfo() {
      const objUpdate = {
        addType: 1,
        cusId: this.flagDetailObj.id,
        cusName: this.flagDetailObj.name,
        followUpRecord: this.flagDetailObj.followUpRecord,
        level: this.flagDetailObj.level,
        phone: this.flagDetailObj.phone,
        quota: this.flagDetailObj.quota,
        remarks: this.flagDetailObj.remarks,
        seasId: this.flagDetailObj.seasId,
        status: this.flagDetailObj.status,
      };
      customersUpdateQualificationsByUser(objUpdate)
        .then((res) => {
          this.getCustomersSeasCus();
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getNowNeedFun(objUpdate.cusId);
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },

    // 删除我的客户
    deletBtn(val) {
      this.$confirm(`是否确认删除’${val.name}‘`, "提示", {
        type: "warning",
        confirmButtonText: "确定",
        showCancelButton: "取消",
        distinguishCancelAndClose: false,
      })
        .then(() => {
          let arr = [];
          arr.push(val.id);
          let deleteCus = {};
          deleteCus.cusIdList = arr;
          customersDelete(deleteCus)
            .then((res) => {
              if (res.code === "200") {
                this.getCustomersSeasCus();
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
                return;
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消!",
          });
        });
    },
    // 批量删除客户
    deleteBtnAll() {
      if (this.salvageArr.length === 0) {
        this.$message({
          type: "error",
          message: "请至少选择一位用户",
        });
      } else {
        this.$confirm(`是否确认删除`, "提示", {
          type: "warning",
          cancelButtonText: "取消",
          showCancelButton: true,
          confirmButtonText: "确定",
          distinguishCancelAndClose: false,
        })
          .then(() => {
            let arr = [];
            for (const element of this.salvageArr) {
              arr.push(element.id);
            }
            let deleteCus = {};
            deleteCus.cusIdList = arr;
            customersBatchDelete(deleteCus)
              .then((res) => {
                if (res.code === "200") {
                  this.getCustomersSeasCus();
                  this.$message({
                    type: "success",
                    message: "操作成功",
                  });
                } else {
                  this.$message({
                    type: "error",
                    message: res.message,
                  });
                  return;
                }
              })
              .catch((err) => {
                this.$message({
                  message: "服务器忙~",
                  type: "warning",
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消!",
            });
          });
      }
    },
    // 获取数据来源列表
    getMesFromList() {
      let obj = {
        limit: 99999,
        page: 1,
      };
      thirdClientList(obj)
        .then((res) => {
          if (res.code === "200") {
            this.mesFromArr = res.data.records;
          } else {
            this.mesFromArr = [];
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 下载模板
    downLoadTem() {
      window.location.href = `${this.$downUrl}customersInfo.xlsx`;
    },
    // 下载客户
    downLoadCus() {
      if (this.salvageArr.length === 0) {
        this.$message({
          type: "error",
          message: "请至少选择一位用户",
        });
      } else {
        let arr = [];
        for (const element of this.salvageArr) {
          arr.push(element.id);
        }
        let downloadCus = {};
        downloadCus.cusIdList = arr;
        customersDownloadCus(downloadCus)
          .then((res) => {
            const link = document.createElement("a");
            let blob = new Blob([res], { type: "application/vnd.ms-excel" });
            link.download = "客户信息";
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            this.$message({
              type: "success",
              message: "下载成功",
            });
          })
          .catch((err) => {
            this.$message({
              message: "服务器忙~",
              type: "warning",
            });
          });
      }
    },
    // 公海客户详情
    // getFlagDetail (val) {
    //   this.showFlagDetailDia = true
    //   this.flagDetailObj = val
    // },
    // 保存公海用户详情
    commitDetail() {
      const objUpdate = {
        addType: 2,
        cusId: this.flagDetailObj.id,
        cusName: this.flagDetailObj.name,
        followUpRecord: this.flagDetailObj.followUpRecord,
        level: this.flagDetailObj.level,
        phone: this.flagDetailObj.phone,
        quota: this.flagDetailObj.quota,
        remarks: this.flagDetailObj.remarks,
        seasId: this.formInSeas.seasId,
        status: this.flagDetailObj.status,
      };
      // console.log(objUpdate);

      customersUpdateQualificationsByUser(objUpdate)
        .then((res) => {
          this.showFlagDetailDia = false;
          this.getCustomersSeasCus();
          if (res.code === "200") {
            this.$message({
              type: "success",
              message: "操作成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 关闭弹框
    closeDiaSeasDetai() {
      this.showFlagDetailDia = false;
      this.getCustomersSeasCus();
      this.flagDetailObj.followUpRecord = "";
    },
    // 查看详情跟进记录
    viewRecords(val) {
      customersFollowUpRecord({ cusId: val })
        .then((res) => {
          if (res.code === "200") {
            this.showFlagDetailDia = true;
            this.recordsRop = res.data;
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 新增公海客户
    addmyCusBtn() {
      this.isShowaddMyCus = true;
    },
    // 展示新增公海客户
    closeShowAdd(name) {
      this.isShowaddMyCus = false;
      // this.resetForm(name)
      this.$refs[name].resetFields();
    },
    // 提交新公海客户
    submitMycus() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          this.myCusFromAdd.seasId = this.formInSeas.seasId;
          customersAdd(this.myCusFromAdd)
            .then((res) => {
              if (res.code === "200") {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.isShowaddMyCus = false;
                this.getCustomersSeasCus();
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        }
      });
    },
    // 确定用户
    submitUser() {
      // console.log(this.checkedUserId);
      let arr = [];
      for (const element of this.salvageArr) {
        arr.push(element.id);
      }
      let shareCus = {};
      shareCus.cusIdList = arr;
      shareCus.userId = this.checkedUserId;

      customersShareCus(shareCus)
        .then((res) => {
          if (res.code === "200") {
            this.getCustomersSeasCus();
            this.isShowUserList = false;
            this.$message({
              type: "success",
              message: "分配成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 表格全选
    handleSelectionChange(val) {
      this.salvageArr = val;
    },
    // 单选
    selectOptions(val) {
      this.salvageArr = val;
    },
    // 捞取
    salvageFun() {
      let arr = [];
      for (const element of this.salvageArr) {
        arr.push(element.id);
      }
      let shareCus = {};
      shareCus.cusIdList = arr;
      customersSalvage(shareCus)
        .then((res) => {
          if (res.code === "200") {
            this.getCustomersSeasCus();
            this.$message({
              type: "success",
              message: "捞取成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 分配
    shareFun() {
      if (this.salvageArr.length <= 0) {
        this.$message({
          type: "error",
          message: "请先勾选客户",
        });
      } else {
        this.isShowUserList = true;
      }
    },
    // 上传客户列表
    uploadExcel(item) {
      let params = new FormData();
      params.append("file", item.file);
      params.append("seasId", this.formInSeas.seasId);
      customersUploadExcel(params)
        .then((res) => {
          if (res.code === "200") {
            this.getCustomersSeasCus();
            this.$message({
              type: "success",
              message: "上传成功",
            });
            this.getImportList();
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 上传文件失败
    fileUploadError() {
      this.$message({
        type: "error",
        message: "文件上传出现未知错误",
        showClose: true,
      });
    },
    fileUploadSuccess(response, file, fileList) {
      if (response.code === "200") {
        this.$message({
          type: "success",
          message: "上传成功",
          showClose: true,
        });
      } else {
        const msg = response.errorMessage || "文件上传失败";
        this.$message({ type: "error", message: msg, showClose: true });
      }
    },
    // 切换公海
    changeSeasId(id, index) {
      for (const element of this.seasList_Arr) {
        element.checked = false;
      }
      this.seasList_Arr[index].checked = true;
      this.formInSeas.seasId = id;
      let objSeasUser = {};
      if (this.formInSeas.value_seas === null) {
        objSeasUser = {
          clientId: this.formInSeas.clientId,
          kw: this.formInSeas.kw,
          level: this.formInSeas.level,
          seasId: this.formInSeas.seasId,
          isRepeat: this.formInSeas.isRepeat,
          noFollowDay: this.formInSeas.noFollowDay,
          page: this.paginationForOut.page,
          limit: this.paginationForOut.pageSize,
          startTime: "",
          endTime: "",
        };
      } else {
        objSeasUser = {
          clientId: this.formInSeas.clientId,
          kw: this.formInSeas.kw,
          seasId: this.formInSeas.seasId,
          level: this.formInSeas.level,
          isRepeat: this.formInSeas.isRepeat,
          noFollowDay: this.formInSeas.noFollowDay,
          page: this.paginationForOut.page,
          limit: this.paginationForOut.pageSize,
          startTime:
            timestampToDate(this.formInSeas.value_seas[0]) === "NaN-aN-aN"
              ? ""
              : timestampToDate(this.formInSeas.value_seas[0]),
          endTime:
            timestampToDate(this.formInSeas.value_seas[1]) === "NaN-aN-aN"
              ? ""
              : timestampToDate(this.formInSeas.value_seas[1]),
        };
      }
      customersSeasCus(objSeasUser)
        .then((res) => {
          // console.log(res);
          if (res.code === "200") {
            this.seasListUser = res.data.records;
            if (
              res.data.total > 0 &&
              Math.ceil(res.data.total / this.paginationForOut.size) <
                this.paginationForOut.page
            ) {
              this.paginationForOut.page = Math.ceil(
                res.data.total / this.paginationForOut.size
              );
              this.getCompanyListFun();
            } else {
              this.paginationForOut.total = res.data.total;
            }
          } else {
            this.seasListUser = [];
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 公海客户列表
    async getCustomersSeasCus() {
      let objSeasUser = {};
      if (this.formInSeas.value_seas === null) {
        objSeasUser = {
          clientId: this.formInSeas.clientId,
          kw: this.formInSeas.kw,
          orderBy: this.orderBy,
          seasId: this.formInSeas.seasId,
          level: this.formInSeas.level,
          isRepeat: this.formInSeas.isRepeat,
          noFollowDay: this.formInSeas.noFollowDay,
          page: this.paginationForOut.page,
          limit: this.paginationForOut.pageSize,
          startTime: "",
          endTime: "",
        };
      } else {
        objSeasUser = {
          clientId: this.formInSeas.clientId,
          kw: this.formInSeas.kw,
          orderBy: this.orderBy,
          seasId: this.formInSeas.seasId,
          isRepeat: this.formInSeas.isRepeat,
          level: this.formInSeas.level,
          noFollowDay: this.formInSeas.noFollowDay,
          page: this.paginationForOut.page,
          limit: this.paginationForOut.pageSize,
          startTime:
            timestampToDate(this.formInSeas.value_seas[0]) === "NaN-aN-aN"
              ? ""
              : timestampToDate(this.formInSeas.value_seas[0]),
          endTime:
            timestampToDate(this.formInSeas.value_seas[1]) === "NaN-aN-aN"
              ? ""
              : timestampToDate(this.formInSeas.value_seas[1]),
        };
      }
      await customersSeasCus(objSeasUser).then((res) => {
        // console.log(res);
        if (res.code === "200") {
          this.seasListUser = res.data.records;
          if (
            res.data.total > 0 &&
            Math.ceil(res.data.total / this.paginationForOut.size) <
              this.paginationForOut.page
          ) {
            this.paginationForOut.page = Math.ceil(
              res.data.total / this.paginationForOut.size
            );
            this.getCompanyListFun();
          } else {
            this.paginationForOut.total = res.data.total;
          }
        } else {
          this.seasListUser = [];
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
      // console.log(objSeasUser);
    },
    resetQuerySeas() {
      this.formInSeas.kw = "";
      this.formInSeas.value_seas = [];
      this.formInSeas.clientId = "";
      this.formInSeas.isRepeat = "";
      this.formInSeas.noFollowDay = "";
      this.formInSeas.level = "";
      this.getCustomersSeasCus();
    },
    // end
    // el-tree 方法
    // 构建父节点ID映射表
    buildParentMap(treeData) {
      const parentMap = {};
      const traverse = (nodes, parentId) => {
        nodes.forEach((node) => {
          parentMap[node.id] = parentId; // 记录当前节点的父节点ID
          if (node.children && node.children.length > 0) {
            traverse(node.children, node.id); // 递归处理子节点
          }
        });
      };
      traverse(treeData, null); // 初始父节点ID为null
      return parentMap;
    },
    // 获取所有选中节点及其父节点的ID
    getAllCheckedIds(selectedIds, parentMap) {
      const idSet = new Set(selectedIds);
      selectedIds.forEach((id) => {
        let currentId = id;
        while (
          parentMap[currentId] !== null &&
          parentMap[currentId] !== undefined
        ) {
          idSet.add(parentMap[currentId]); // 添加父节点ID
          currentId = parentMap[currentId]; // 继续向上查找
        }
      });
      return Array.from(idSet);
    }, // 初始化数据
    async initTreeData() {
      // 构建父节点映射并计算所有需要选中的ID
      const parentMap = this.buildParentMap(treeData);
      this.defaultCheckedKeys = this.getAllCheckedIds(selectedIds, parentMap);
      this.defaultExpandedKeys = [...this.defaultCheckedKeys]; // 展开选中的节点
    },
    // el-tree end
    // 公海详情
    setSeas(data) {
      this.$nextTick(() => {
        if (this.$refs.detailUserTree) {
          this.$refs.detailUserTree.setCheckedKeys([]); // 清空所有勾选
        }
      });
      this.departmentIDArr = [];
      this.isShowSeasDetail = true;
      let dataConfig = JSON.parse(data.seasConfig);
      // console.log(dataConfig);

      // 构建父节点映射并计算所有需要选中的ID
      const parentMap = this.buildParentMap(this.seasDepartmentList);
      this.defaultCheckedKeys = this.getAllCheckedIds(
        dataConfig.depPermissionIdList,
        parentMap
      );
      this.defaultExpandedKeys = [...this.defaultCheckedKeys]; // 展开选中的节点
      // console.log(dataConfig.depPermissionIdList);

      if (dataConfig.depPermissionIdList.length > 0) {
        this.departmentIDArr.push(...dataConfig.depPermissionIdList);
      }
      // console.log(this.departmentIDArr);

      this.seasDetail.seasName = data.seasName;
      this.seasDetail.seasId = data.id;
      this.seasDetail.followUpRecordType = dataConfig.followUpRecordType;
      this.seasDetail.noCome = dataConfig.noCome;
      this.seasDetail.noFollowUpTime = dataConfig.noFollowUpTime;
      this.seasDetail.noSuccess = dataConfig.noSuccess;
      this.seasDetail.userListArrSelect = dataConfig.userPermissionIdList;
      this.seasDetail.enAttributeID = dataConfig.enAttribute;
      const idSet = new Set(dataConfig.enAttribute);
      const idSetUser = new Set(dataConfig.userPermissionIdList);
      this.fieldArr.forEach((item) => {
        item.checked = idSet.has(item.id);
      });
      this.userListArr.forEach((item) => {
        item.checked = idSetUser.has(item.id);
      });
    },

    // 删除公海
    deleteSeas(val){
      this.$confirm(`是否确认删除’${val.seasName}‘`, "提示", {
        type: "warning",
        confirmButtonText: "确定",
        showCancelButton: "取消",
        distinguishCancelAndClose: false,
      })
        .then(() => {
          seasDelete({seasId: val.id})
            .then((res) => {
              if (res.code === "200") {
                this.getSeasListFun();
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
                return;
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消!",
          });
        });
    },
    // 公海详情 和修改
    // 保存修改公海详情按钮
    addConfigUserRole() {
      this.$refs.basicForm.validate((valid) => {
        if (valid) {
          let nullObj = {
            config: {},
          };
          nullObj.config.enAttribute = this.seasDetail.enAttributeID;
          nullObj.config.depPermissionIdList = this.departmentIDArr;
          nullObj.config.userPermissionIdList =
            this.seasDetail.userListArrSelect;
          nullObj.config.noSuccess = this.seasDetail.noSuccess;
          nullObj.config.noFollowUpTime = this.seasDetail.noFollowUpTime;
          nullObj.config.noCome = this.seasDetail.noCome;
          nullObj.config.followUpRecordType =
            this.seasDetail.followUpRecordType;
          nullObj.config.seasId = this.seasDetail.seasId;
          nullObj.seasId = this.seasDetail.seasId;
          nullObj.seasName = this.seasDetail.seasName;
          seasUpdate(nullObj)
            .then((res) => {
              if (res.code === "200") {
                this.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.isShowSeasDetail = false;
                this.getSeasListFun();
                this.getDepaermentList(); // 部门列表
                this.getUserList(); // 用户列表
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        }
      });
    },
    // 获取用户列表
    getUserList() {
      const userObj = {
        limit: 99999,
        page: 1,
      };
      userList(userObj)
        .then((res) => {
          if (res.code === "200") {
            if (res.data.records.length > 0) {
              for (const element of res.data.records) {
                element.checked = false;
              }
              this.userListArr = res.data.records || [];
            } else {
              this.userListArr = res.data.records || [];
            }
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 获取部门列表
    getDepaermentList() {
      departmentList()
        .then((res) => {
          if (res.code === "200" && res.data != null) {
            const nullArr = [];
            nullArr.push({
              depName: res.data.name,
              id: res.data.id,
              childList: JSON.parse(JSON.stringify(res.data.departmentList)),
            });
            this.seasDepartmentList = nullArr;
          } else {
            this.seasDepartmentList = [];
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "服务器忙~",
            type: "warning",
          });
        });
    },
    // 选择部门
    checkedFun(checkedNodes, data) {
      this.departmentIDArr = data.checkedKeys;
    },
    // 获取公海列表
    getSeasListFun() {
      let perArr = JSON.parse(storages.getItem("permissionsButtonArr"));
      if (perArr.indexOf("seas:list") != -1) {
        seasList()
          .then((res) => {
            if (res.code === "200") {
              if (res.data.length > 0) {
                for (const element of res.data) {
                  element.checked = false;
                }
                res.data[0].checked = true;
                this.seasList_Arr = res.data;
                this.formInSeas.seasId = res.data[0].id;
                this.changeSeasId(res.data[0].id, 0); // 公海用户列表
              } else {
                this.seasList_Arr = [];
              }
            } else {
              this.seasList_Arr = [];
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
          })
          .catch((err) => {
            this.$message({
              message: "服务器忙~",
              type: "warning",
            });
          });
      } else {
        this.seasList_Arr = [];
      }
    },
    // 关闭公海详情
    closeDiaDetial() {
      setTimeout(() => {
        this.defaultExpandedKeys = [];
      }, 0);
      this.isShowSeasDetail = false;
    },
    // end
    // 新增公海
    addRoleBtn() {
      this.isShowaddSeas = true;
    },
    // 提交新公海
    submitSeas() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          seasAdd(this.seasFromAdd)
            .then((res) => {
              if (res.code === "200") {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.isShowaddSeas = false;
                this.getSeasListFun();
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.$message({
                message: "服务器忙~",
                type: "warning",
              });
            });
        }
      });
    },
    // 关闭新增弹框
    closeDia() {
      this.isShowaddSeas = false;
      this.isShowSeasDetail = false;
    },
    // 重置 - 搜索 - 新增
    resetQuery(fromName) {
      // this.resetForm(fromName)
      this.$refs[fromName].resetFields();
      this.isShowaddSeas = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.seasBox {
  width: 100%;
  height: 100%;
  display: flex;
}
.seasItemBox {
  font-size: 14px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 5px 5%;
  background: #fff;
  color: #000;
  margin: 3px 0 6px 0;
  box-shadow: -8px 0 15px -5px rgba(0, 0, 0, 0.2),
    -4px 0 6px -2px rgba(255, 255, 255, 0.3);
  :nth-child(1) {
    width: 90%;
  }
  :nth-child(2) {
    width: 10%;
  }
}
.checkSeasItemBox {
  font-size: 14px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 5px 5%;
  background: $color-primary;
  color: #fff;
  margin: 3px 0 6px 0;
  box-shadow: -8px 0 15px -5px rgba(0, 0, 0, 0.2),
    -4px 0 6px -2px rgba(255, 255, 255, 0.3);
  :nth-child(1) {
    width: 90%;
  }
  :nth-child(2) {
    width: 10%;
  }
}
.leftSeasBox {
  width: 25%;
  height: 100%;
}
.rightSeasBox {
  width: 75%;
  margin-left: 2px;
  padding: 5px 2px;
  box-shadow: -8px 0 15px -5px rgba(0, 0, 0, 0.2),
    -4px 0 6px -2px rgba(255, 255, 255, 0.3);
  min-height: 100%;
}
.buttons {
  width: 100%;
  text-align: center;
}

.user-item {
  margin: 8px 0;
  padding: 8px;
  transition: background-color 0.3s;
}
.user-item:hover {
  background-color: #f5f7fa;
}
.nullArrList {
  width: 100%;
  height: 50px;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
  color: $config-from-text-color;
}
.filter-container {
  padding: 10px 1%;
  width: 98%;
  min-height: 80vh;
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  position: relative;
  .innerBigBox {
    padding: 5px;
    width: 69%;
    height: auto;
    .innerSty {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .outBox {
        width: 85%;
        .templeateBox {
          height: 40px;
          line-height: 40px;
          display: flex;
          .innerPhone {
            width: 30%;
            display: flex;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            div {
              width: 50px !important;
              font-weight: 600;
            }
            .el-icon-phone-outline {
              margin-top: 12px;
            }
          }
          .innerPhone_selet {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 40%;
            margin-left: 10px;
            display: flex;
          }
        }
      }
      .innerBottonGroups {
        width: auto;
        // :nth-child(1) {
        //   margin-bottom: 5px;
        //   background-color: $color-primary;
        // }
        // :nth-child(2) {
        //   background-color: #df8d8d;
        // }
        div {
          border-radius: 5px;
          width: fit-content;
          padding: 3px 10px;
          cursor: pointer;
          color: $color-primary;
        }
      }
    }
    .userRemark {
      width: 100%;
      margin: 10px 0;
      .remarkTitle {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        :nth-child(2) {
          color: $color-primary;
          cursor: pointer;
          padding: 2px 10px;
          border-radius: 5px;
        }
      }
      .beforeWords {
        display: flex;
        div {
          margin: 0 5px;
          color: $color-primary;
          border-bottom: 1px solid $color-primary;
          cursor: pointer;
        }
      }
    }
  }
  .followRecode {
    box-shadow: 1px 0 7px rgba(0, 21, 41, 0.35);
    padding: 5px;
    width: 29%;
    .titleFo {
      width: 100%;
      font-weight: 600;
    }
    .outSideBox {
      max-height: 60vh;
      overflow-y: scroll;
      .contentFo {
        width: 100%;
        height: auto;
        margin: 10px 0;
        padding: 5px 5px;
        box-shadow: 4px 0 7px rgba(0, 21, 41, 0.35);
        .timeBox {
        }
        .messageBox {
        }
      }
    }
  }
  .bottomBtns {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    div {
      margin: 0 20px;
    }
  }
}
.el-drawer__header {
  margin-bottom: 0;
}
</style>
